<template>
        <label class="swich_body" @click="swich_click" :class="{'is_swich':value}">
            <span class="swich_core">
                <span class="swich_main"></span>
            </span>
        </label>
</template>
<script>
export default {
    props:{
        value:{
            type:Boolean,
            default:false
        }
    },
    methods:{ 
        swich_click(){
        this.$emit('input',!this.value)
    }}
   
}
</script>
<style lang="scss">
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

.swich_core{
     position:relative; 
    display: inline-block;
    width:40px;
    height: 20px;
    background-color: red;
    border-radius: 10px;
    transition:border-color .3s,background-color .3s;
}
.swich_main{
    display: inline-block;
    width:16px;
    height: 16px;
    transition:all .3s;
    background-color: white;
    border-radius: 100%;
    position:absolute;
    top:1.5px;
    left: 1.5px;

}
.is_swich{
    .swich_core{
       background-color: #13CE66;
    .swich_main{
             transform: translateX(20px);
       }
    }
}   

      
         
    

    



</style>